<template>
  <div class="supplier-create">
    <van-form @submit="onSubmit">
      <van-cell-group title="基本信息">
        <van-field
          v-model="form.name"
          label="供应商名称"
          placeholder="请输入供应商名称"
          required
        />
        <van-field
          v-model="form.contactPerson"
          label="联系人"
          placeholder="请输入联系人姓名"
        />
        <van-field
          v-model="form.contactEmail"
          label="联系邮箱"
          placeholder="请输入联系邮箱"
          type="email"
        />
        <van-field
          v-model="form.contactPhone"
          label="联系电话"
          placeholder="请输入联系电话"
          type="tel"
        />
      </van-cell-group>
      
      <van-cell-group title="地址信息">
        <van-field
          v-model="form.address"
          label="地址"
          placeholder="请输入详细地址"
          type="textarea"
          autosize
        />
      </van-cell-group>
      
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { createSupplier } from '@/api/supplier'
import { showSuccessToast, showFailToast } from 'vant'

export default {
  setup() {
    const router = useRouter()
    const form = ref({
      name: '',
      contactPerson: '',
      contactEmail: '',
      contactPhone: '',
      address: ''
    })
    
    const onSubmit = async () => {
      try {
        await createSupplier(form.value)
        showSuccessToast('创建成功')
        router.push({ name: 'SupplierList' })
      } catch (error) {
        console.error('创建供应商失败:', error)
        showFailToast('创建失败')
      }
    }
    
    return {
      form,
      onSubmit
    }
  }
}
</script>

<style scoped>
.supplier-create {
  padding-bottom: 50px;
}
</style>